<template>
  <div class="row" style="width:1200px; margin: 0 auto;box-sizing: border-box;">

    <div class="col-sm-8 blog-main" style="float: left">
      <div class="blog-body expansion" style="padding: 0;">

      </div>

      <article class="fade-in" v-for="itme in arr">
        <header class="entry-header">
          <span class="art art-original"><i class="fa fa-check fa-fw"></i>转载</span>

          <h2 class="entry-title">
            <router-link tag="a" :to="'/details/'+ itme.id">
              {{ itme.name }}
            </router-link>
          </h2>
        </header>
        <div class="entry-content">
          <div class="archive-content">
            {{ itme.wenben }}
          </div>
          <span class="entry-meta">
            <span class="date" v-if="itme.author">作者：{{ itme.author.username }}</span>
<span class="date" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="文章发表日期"><i
    class="fa fa-clock-o fa-fw"></i> {{ itme.time }}</span>
<span class="views" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="文章阅读次数"><i
    class="fa fa-eye fa-fw"></i>浏览({{ itme.hit }})</span>
<span class="comment" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="文章评论次数">
 <router-link tag="a" :to="'/details/'+ itme.id">
<i class="fa fa-comments-o fa-fw"></i>评论({{ itme.pls }})
 </router-link>
</span>
</span>
          <div class="clear"></div>
          <span class="entry-more">
 <router-link tag="a" :to="'/details/'+ itme.id">阅读全文</router-link>
</span>
        </div>
      </article>
      <Page v-model="page" :total="total" show-sizer show-total @on-change="cg" @on-page-size-change="cgfy"/>
    </div>
    <!--        <a href="api/pachong" target="_blank">进入模板</a>-->

    <!--        <textRender></textRender>
            <dateTime date="2019-11-12"></dateTime>
            <dateTime></dateTime>-->

    <div class="col-sm-3 blog-sidebar" style="float: right;padding-top: 10px;">
      <input v-model="zidu" style="width: 82%; border: 1px #ccc solid;border-radius: 4px; height: 35px; "
             placeholder="   输入文章关键字"/>
      <button @click="dzsj" style="background: #00bb00">搜索</button>
      <left></left>
    </div>

    <div v-for="itme in arr3">id: {{ itme.id }}
      <router-link tag="a" :to="'/details/'+ itme.id">
        -- {{ itme.name }}
      </router-link>
    </div>
  </div>
</template>

<script>
import water from './water'
import dateTime from './dateTime'
import textRender from './textRender'
import left from './left'

export default {

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',

      arr: [],
      arr1: [],
      arr3: [],
      zidu: '',
      page: 1,
      total: 8,
      size: 10
    }
  },
  mounted () {
    // water.set("水印内容")
    this.getlist()
    // this.getlist2()
  },
  methods: {
    cg (index) {
      this.page = index
      this.getlist()
    },
    cgfy (index) {
      this.size = index
      this.page = 1
      this.getlist()
    },
    dzsj () {
      this.page = 1
      this.getlist()
    },
    getlist () {
      this.$axios.get('api/article/list?zd=' + this.zidu + `&page=${this.page}` + `&size=${this.size}`).then(res => {
        this.arr = res.data.data.list
        this.total = res.data.data.total
        this.page = res.data.data.pageNum
      })

      if (localStorage.getItem('token')) {
        console.log(2)
        this.$axios.get(`api/article/lately`).then(res => {
          this.arr3 = res.data.data
        })
      }
    },
    getlist2 () {
      this.$axios.get('api/pachong').then(res => {
        console.log(res)
      })
    }
  },
  components: {
    dateTime,
    textRender,
    left
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
